<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./js/index.js">
</head>
<body>
    <div class="content"> 
        <div class="login-wrapper">
            <div class="right-login-form">
                <div class="form-wrapper">
                    <h1>登录窗口</h1>
                    <div class="input-items">
                        <span class="input-tips">
                            用户名
                        </span>
                        <input type="text" name="unum" id="username" class="inputs" placeholder="请输入用户名">
                        <span class="msg"></span>
                    </div>
                    <div class="input-items">
                        <span class="input-tips">
                            密码
                        </span>
                        <input type="password" name="password" id="password" class="inputs" placeholder="请输入6~8密码">
                        <span class="msg"></span>
                    </div>
                    <button class="btn">登录</button>
                    <div class="siginup-tips">
                        <span><a href="./register.html">注册</a></span>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    window.onload=function () {
         var btn = document.querySelector(".btn");
         var usernameEle = document.querySelector("#username");
         var passwordEle = document.querySelector("#password")
         btn.onclick =function () {
             //获取用户名和密码 进行登录操作
             var username = usernameEle.value;
             var password = passwordEle.value;
             if(username!=="" && password!==""){
                 //发ajax请求!!! 进行登录操作
                 var xhr = new XMLHttpRequest();
                 xhr.addEventListener("load", function () {
                     //请求完成
                     var res = JSON.parse(this.responseText)
                     if(res.data === "error"){
                         //登录操作失败 提醒一下用户
                         alert(res.message)
                     }else{
                         // 登录操作得成功!!!! 才能跳转博客页; 持久化存储token
                         var token = res.data;
                         //前端将token存到localStorage中
                         localStorage.setItem("token",token);
                         window.location.href = "./blog.html";
                     }
                 });
                 xhr.open("POST", "http://127.0.0.1:8080/api/users/login");
                 xhr.withCredentials=true;
                 xhr.send(JSON.stringify({
                     username:username,
                     password:password
                 }));
             }
         }
    }
</script>
</html>